<!-- 图像操作区 -->
<template>
  <div class="lsh-image-editor" ref="boxRef">
    <button @click="hanScaleChange(true)">+</button>
    <button @click="hanScaleChange(false)">-</button>
    <v-stage :config="configKonva" ref="stageRef">
      <v-layer :config="{
        listening: false
      }">
        <v-image :config="{
          width: configKonva?.width,
          height: configKonva?.height,
          image: imageObj?.bgImage?.src,
          listening: false
        }" />
      </v-layer>
      <v-layer @startDrag="hanOpenSelectBox">
        <v-rect  v-for="(item, index) in list" :key="index"
          :config="{ x: index * Math.random(), y: index * Math.random(), width: 20*configKonva.scale.x, height: 20*configKonva.scale.y, fill: '', stroke: 'red', draggable: true }" />
        <v-rect :config="selectBox"/>
      </v-layer>
    </v-stage>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue';
import VueKonva from 'vue-konva'
const boxRef = ref();
const stageRef = ref()
const list = Array.from(new Array(200));
const configKonva = reactive({
  width: 800,
  height: 800,
  scale: { x: 1, y: 1 },
})
const imageObj = reactive({
  bgImage: {
    url: 'src/assets/image/test.png',
    src: ''
  },
})
const selectBox = reactive({
  visible:true,
  x:0,
  y:0,
  width:0,
  height:0,
  fill:'rgba(230,230,230,0.5)',
  stroke:'blue',
  scale:{ x: 1, y: 1 }
})
const hanLoadeImages = () => {
  for (let key in imageObj) {
    const image = new window.Image();
    image.src = imageObj[key].url;
    image.onload = () => {
      imageObj[key].src = image;
    };
  }
}
onMounted(() => {
  hanLoadeImages();
})
const hanClick = (e) => {
  console.log('click', e)
}

const hanScaleChange = (isAdd: boolean) => {
  if (isAdd) {
    configKonva.scale.x += 0.1, configKonva.scale.y +=0.1
  } else {
    configKonva.scale.x -= 0.1, configKonva.scale.y -= 0.1
  }
}
const hanOpenSelectBox = (e) =>{
  selectBox.visible = true
  console.log(e)
}
</script>
<style scoped lang='less' >
@import url('./index.less');
</style>